<template>
  <view class="home_tabbar">
    <view class="action" :class="currentIndex === 0 ? 'text-green' : 'text-gray'" @click="switchTab(0, 'index')">
      <view class="iconfont" :class="currentIndex === 0 ? 'active iconshouye1' : 'iconshouye'"></view>
      首页
    </view>
    <view class="action" :class="currentIndex === 1 ? 'text-green' : 'text-gray'" @click="switchTab(1, 'diagnose')">
      <view class="iconfont" :class="currentIndex === 1 ? 'active iconleimupinleifenleileibie2' : 'iconfenlei'"></view>
      智能问诊
    </view>
    <!-- <view class="action" :class="currentIndex === 2 ? 'text-green' : 'text-gray'" @click="switchTab(2, 'index')">
      <view class="iconfont" :class="currentIndex === 2 ? 'active iconiconfontzhizuobiaozhun22' : 'iconiconfontzhizuobiaozhun22'"></view>
      搜索
    </view> -->
    <view class="action" :class="currentIndex === 2 ? 'text-green' : 'text-gray'" @click="switchTab(2, 'cart')">
      <view class="iconfont" :class="currentIndex === 2 ? 'active iconyisheng' : 'iconyisheng1'"></view>
      人工问诊
    </view>
    <view class="action" :class="currentIndex === 3 ? 'text-green' : 'text-gray'" @click="switchTab(3, 'cart')">
      <view class="iconfont" :class="currentIndex === 3 ? 'active iconai66' : 'iconicon-'"><u-badge type="error" :count="number" :offset="[-10, 50]"></u-badge></view>
      购物车
    </view>
    <view class="action" :class="currentIndex === 4 ? 'text-green' : 'text-gray'" @click="switchTab(4, 'usercenter')">
      <view class="iconfont" :class="currentIndex === 4 ? 'active iconwode' : 'iconweibiaoti-'"></view>
      我的
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    currentIndex: {
      // 当前选中下标
      type: Number,
      default: 0
    }
  },
  data() {
    return {};
  },
  computed: {
    isDev() {
      return this.$store.state.isDev;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
    number() {
      // 购物车数量
      let num = 0;
      // this.$store.state.cart.forEach(item => {
      //   num += item.quantity;
      // });
      return num;
    }
  },
  created() {},
  methods: {
    switchTab(index, ref) {
      if (index === 2) {
        // 搜索为单独新页面
        // uni.navigateTo({
        //   url: '/pages/search/index'
        // });
        uni.showToast({
          icon: 'none',
          title: '正在紧张开发中。。。'
        });
      } else {
        this.$emit('switch', {
          index: index,
          ref: ref
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.home_tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 200;
  display: flex;
  align-items: center;
  min-height: 100upx;
  justify-content: space-between;
  background-color: #ffffff;
  .action {
    font-size: 22upx;
    position: relative;
    flex: 1;
    text-align: center;
    padding: 0;
    display: block;
    height: auto;
    line-height: 1;
    margin: 0;
    overflow: initial;
  }
  .iconfont {
    margin-bottom: 10upx;
  }
  .text-green {
    color: #ffcf31;
  }
  .active {
    animation: icon_active 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.8);
  }
  @keyframes icon_active {
    0%,
    17.5% {
      font-size: 0;
    }
  }
  .bg-green {
    background-color: #ffcf31;
  }
  .badge {
    right: 15upx;
  }
}
</style>
